<!DOCTYPE html>
<html lang="en">
<head>
    <?php $this->load->view('common/head');?>
    <!-- 本页面所有 -->
    <meta name="keywords" content="特殊教育，家庭，特殊儿童，早期干预，AEPS，个别教育计划，评估">
    <meta name="description" content="七维提供的个人及家庭服务旨在遵循儿童成长规律，掌握个体差异，帮助家长真正做到因材施教，促进儿童能力发展；同时推动家长改善教育方式，系统掌握家庭教育的科学理念与实践方式。">
    <title>七维教育—功能教室</title>
    <!-- 导入自定义字体 -->
    <link rel="stylesheet" href="/assets/css/iconfont.css">
    <!-- 导入页面unslider样式 -->
    <link rel="stylesheet" href="/assets/css/unslider.css">
    <!-- 导入unslider插件 -->

    <script type="text/javascript" src="/assets/js/unslider.js"></script>
    <script type="text/javascript" src="/assets/js/room-list.js"></script>
    <style>
        #app{
            width:1200px;
            margin: 0 auto;
            background-color: white;
        }
        .banner {
            position: relative;
            overflow: auto;
            width: 100%;
            height: 594px;
        }
        .banner>ul{
            height: 100%;
        }
        .banner>ul>li{
            overflow:hidden;
            position:relative;
            width:100%;
            height: 100%;
        }
        .banner img {
            position: absolute;
            top: 0;
            left:0;
            right: 0;
            bottom: 0;
            width: 1200px !important;
            height: 594px !important;
            margin-left: 0;
        }
        .unslider-arrow{
            display: none;
        }
        .unslider-nav{
            display: none;
        }
        .tip-container{
            width:100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: white;
        }
        .tip-container>img{
            cursor: pointer;
        }
        .tip-wrapper{
            margin-top: -38px;
            padding: 38px 34px 42px 34px;
            width: 820px;
            z-index: 999;
            align-self: flex-start;
            background: white;
            box-shadow: 3px 3px 6px rgba(0,0,0, 0.1);
        }
        .tip-title-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
        }
        .tip-title{
            font-size:26px;
            font-weight:bold;
            color: #454545;
        }
        .tip-title-img{
            font-size: 20px;
            font-weight: bold;
            color: #919191;
        }
        .tip-desc{
            color: #919191;
            font-size:20px;
            line-height: 28px;
        }
        .content{
            width: 1200px;
            margin: 150px auto 114px auto;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            background-color: white;
        }
        .block-item{
            margin-right: 120px;
            margin-bottom: 76px;
            width: 540px;
        }
        .block-item-no-mr{
            margin-right: 0;
        }
        .block-title{
            font-size:26px;
            font-weight: bold;
            color: #454545;
            margin-bottom: 40px;
        }
        .block-desc{
            color: #919191;
            font-size:20px;
            line-height: 28px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
<div id="header" class="header">
    <?php $this->load->view('common/header');?>
</div>
<div id="app" class="container">
    <div id="fullpage" class="banner">
        <ul>
            <li v-for="sliderImg in sliderImgs"><img :src="sliderImg.img" :alt="sliderImg.title"></li>
        </ul>
    </div>
    <div class="tip-container">
        <img src="/assets/images/classroom/arrow-left.png" alt="" @click="goPrev">
        <div class="tip-wrapper">
            <div class="tip-title-wrapper">
                <div class="tip-title">{{roomName}}</div>
                <div class="tip-title-img">{{showingImg.title}}</div>
            </div>
            <div class="tip-desc">
                {{showingImg.desc}}
            </div>
        </div>
        <img src="/assets/images/classroom/arrow-right.png" alt="" @click="goNext">
    </div>
    <div class="content">
        <div v-for="(block, blockIndex) in blockList" :class="'block-item '+((blockIndex+1)%2?'':'block-item-no-mr')">
            <div class="block-title">{{block.title}}</div>
            <div v-for="desc in block.descList" class="block-desc">{{desc}}</div>
        </div>
    </div>
</div>
<div class="footer">
    <?php $this->load->view('common/footer');?>
</div>
<script>
    $(function () {
        var roomIndex = parseInt(getQueryString("index"));
        roomIndex = roomIndex || 0;

        var roomName = roomList[roomIndex].title
        var sliderImgs = roomList[roomIndex].sliderImgs;
        var blockList = roomList[roomIndex].blockList;

        var slider;
        window.vm = new Vue({
            el:'#app',
            data:{
                roomName: roomName,
                sliderIndex: 0,
                sliderImgs:sliderImgs,
                blockList: blockList,
            },
            computed:{
                showingImg:function(){
                    return this.sliderImgs[this.sliderIndex];
                }
            },
            methods:{
                goNext:function(){
                    slider.unslider("next");

                    var nextIndex = this.sliderIndex+1;
                    if(nextIndex>=this.sliderImgs.length){
                        nextIndex =0;
                    }
                    this.sliderIndex = nextIndex;
                },
                goPrev:function(){
                    slider.unslider("prev");

                    var nextIndex = this.sliderIndex-1;
                    if(nextIndex<0){
                        nextIndex =this.sliderImgs.length-1;
                    }
                    this.sliderIndex = nextIndex;
                },
            },
            mounted:function(){
                slider = $('.banner').unslider({
                    autoplay: false,
                    speed: 800,               //  The speed to animate each slide (in milliseconds)
                    delay: 10000,              //  The delay between slide animations (in milliseconds)
                    dots: false,               //  Display dot navigation
                });
            }
        })

        function getQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var search = decodeURIComponent(window.location.search.substr(1));
            var r = search.match(reg);
            if (r != null) return r[2]; return null;
        }
    })
</script>
</body>
</html>
